<template>
  <div class="Htop">
    <div class="flex JustifyContentSA" style="padding: 0 1.25rem;">
      <!-- left -->
      <div class="flex flex1">
        <div class="title_box1 Bold colorF flexC JustifyContentC cursor" @click="clone.shouli = true">
          <p>
            <span class="font_s36">{{ this.homeInfo.jbjgs === (null || undefined) ? '0' : this.homeInfo.jbjgs }}</span>
          </p>
          <p class="font_s18" style="color:rgba(255,255,255,0.6);">受理机构点</p>
        </div>
        <div class="title_box2 Bold colorF flexC JustifyContentC cursor" @click="clone.pinggu = true">
          <p>
            <span class="font_s36">{{ this.homeInfo.pgjgs === (null || undefined) ? '0' : this.homeInfo.pgjgs }}+
              {{ this.homeInfo.wsfwjgs === (null || undefined) ? '0' : this.homeInfo.wsfwjgs }} </span>
          </p>
          <p class="font_s18" style="color:rgba(255,255,255,0.6);">评估机构</p>
        </div>
      </div>
      <!-- center -->
      <p class="title colorF font_s27 textC"><!-- 浦东社会组织协同监管平台 --></p>
      <!-- right -->
      <div class="flex flex1">
        <div class="title_box3 Bold colorF flexC JustifyContentC cursor" @click="clone.liveServe = true">
          <p>
            <span class="font_s36">{{ this.homeInfo.fwjgs === (null || undefined) ? '0' : this.homeInfo.fwjgs}}</span>
          </p>
          <p class="font_s18" style="color:rgba(255,255,255,0.6);">服务机构数</p>
        </div>
        <div class="title_box4 Bold colorF flexC JustifyContentC cursor" @click="clone.laoren = true">
          <p>
            <span class="font_s36">{{ creditForm.jrfwlrs}}</span>
          </p>
          <p class="font_s16" style="color:rgba(255,255,255,0.6); margin-left: -0.7rem;">当日居家服务老人数</p>
        </div>
      </div>
    </div>
    <YiBaoPolygon02 v-if="clone.shouli" @hidden="hiddenClone(0)" title="受理机构点"><Shouli></Shouli></YiBaoPolygon02>
    <YiBaoPolygon02 v-if="clone.pinggu" @hidden="hiddenClone(1)" title="评估机构"><Pinggu></Pinggu></YiBaoPolygon02>
    <YiBaoPolygon02 v-if="clone.liveServe" @hidden="hiddenClone(2)" title="服务机构数"><LiveServeOrganization></LiveServeOrganization></YiBaoPolygon02>
    <YiBaoPolygon02 v-if="clone.laoren" @hidden="hiddenClone(3)" title="当日居家服务老人数"><Laoren></Laoren></YiBaoPolygon02>
  </div>
</template>

<script>
import YiBaoPolygon02 from '@/components/YiBaoPolygon02'
import Shouli from './topComponents/Shouli'
import Pinggu from './topComponents/Pinggu'
import Laoren from './topComponents/Laoren'
// 住养服务机构、居家服务机构
import LiveServeOrganization from './topComponents/LiveServeOrganization'

export default {
  components: {
    YiBaoPolygon02,
    Shouli,
    Pinggu,
    Laoren,
    LiveServeOrganization
  },
  data () {
    return {
      homeInfo: { },
      jbjgs: 0,
      fwjgs: 0,
      drjjfwlrzs: 0,
      creditForm: {
        jrfwlrs: 0
      },
      clone: {
        shouli: false,
        pinggu: false,
        liveServe: false,
        laoren: false
      }
    }
  },
  created () {
    this.homeHandele()
    setInterval(() => {
      this.homeHandele()
      console.log('Htop Update post')
    }, 60 * 60 * 1000)
  },
  methods: {
    hiddenClone (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.shouli = false
      } else if (index === 1) {
        this.clone.pinggu = false
      } else if (index === 2) {
        this.clone.liveServe = false
      } else if (index === 3) {
        this.clone.laoren = false
      }
    },
    homeHandele () {
      this.$http.post(this.$api.Index.index, ' ', true).then(result => {
        this.homeInfo = result.data.result
      })
    }
  },
  mounted () {
    setInterval(() => {
      this.creditForm.jrfwlrs = 0
      var creditIntervalJrfwlrs = null
      var drjjfwlrzsValue = null
      creditIntervalJrfwlrs = setInterval(() => {
        if (this.homeInfo.drjjfwlrzs === (null || undefined)) {
          drjjfwlrzsValue = 0
        } else {
          drjjfwlrzsValue = this.homeInfo.drjjfwlrzs
        }
        if (this.creditForm.jrfwlrs >= drjjfwlrzsValue) {
          this.creditForm.jrfwlrs = drjjfwlrzsValue
          clearInterval(creditIntervalJrfwlrs)
        } else {
          if (parseInt(this.creditForm.jrfwlrs + Math.ceil(drjjfwlrzsValue / 10)) >= drjjfwlrzsValue) {
            this.creditForm.jrfwlrs = drjjfwlrzsValue
          } else {
            this.creditForm.jrfwlrs = parseInt(this.creditForm.jrfwlrs + Math.ceil(drjjfwlrzsValue / 10))
          }
        }
      }, 60)
    }, 4000)
  }
}
</script>

<style lang="scss" scoped>
.Htop {
   padding-top: 1rem;
  width: 100%;
  height: 12%;
  .title {
    width: 44%;
    height: 12vh;
    background: url(../..//assets/img/home/001.png) no-repeat center;
    background-size: 100% 100%;
  }
  .title_box1,
  .title_box2,
  .title_box3,
  .title_box4 {
    width: 50%;
    height: 74%;
    padding-left: 6.875rem;
    box-sizing: border-box;
  }
  .title_box1 {
    background: url(../..//assets/img/home/002.png) no-repeat;
    background-size: 100% 100%;
  }
  .title_box2 {
    background: url(../..//assets/img/home/003.png) no-repeat;
    background-size: 100% 100%;
  }
  .title_box3 {
    background: url(../..//assets/img/home/004.png) no-repeat;
    background-size: 100% 100%;
  }
  .title_box4 {
    background: url(../../assets/img/home/005.png) no-repeat;
    background-size: 100% 100%;
    padding-left: 5.25rem;
  }
}
</style>
